<script setup lang='ts' name="video-list">
import { useOpen } from '@/pages/home/component/use-open'
import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    data?: any
}>(), {
    data: () => [],
})

const { openNewWindow } = useOpen()

const { data } = toRefs(props)

function goToDetail(val: any) {
    openNewWindow('/product-info', {
        id: val.productNo,
    })
}
</script>

<template>
    <div v-if="data?.records?.length">
        <el-row :gutter="20">
            <el-col v-for="(item, index) in data?.records"
                    :key="index"
                    :span="6"
                    class="mb-20 h-401 w-295"
            >
                <div class="cursor-pointer"
                     @click="goToDetail(item)"
                >
                    <img class="mx-auto mr-10 rounded-4 h-284 w-285"
                         :src="item.productImage?.split(';')?.[0]"
                    >

                    <p class="title-sty mb-5 mt-20 text-16 c-#1D2129 font-600">
                        {{ item.productName }}
                    </p>

                    <span v-if="item?.brandName"
                          class="px-5 py-2 mt-8 bg-#f2f5f7 rounded-4 text-14 c-#767676"
                    >
                        {{ item.brandName }}
                    </span>
                </div>

                <!--  <p class="px-10 mt-16 text-16 c-#DA0004 font-600">
                    ¥ 100.00 ~ ¥ 180.00
                </p> -->
            </el-col>
        </el-row>
    </div>

    <div v-else
         class="text-center"
    >
        <!-- <img class="mx-auto my-20 h-120 w-120"
            :src="img"
            alt=""
        > -->

        <p class="py-200 text-16">
            抱歉，没有找到相关的产品
        </p>

        <!-- <p calss="text-12">
            您可添加集采运营人员微信，人工为您服务
        </p> -->
    </div>
</template>

<style lang="less" scoped>
.title-sty {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
